<template>
  <div class="mod-config">
    <basic-container>
      <!-- 搜索选项 -->
      <div
        style="
          border-radius: 4px;
          border-width: 1px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          margin: 5px 5px;
        "
      >
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark"></div
          ></el-col>
        </el-row>
        <el-row justify="center">
          <el-col :span="8">
            <el-label>视频分类：</el-label>
            <el-radio-group
              v-model="queryObj.myVideoClass"
              @change="getDataList"
            >
              <el-radio-button label="cosplay"></el-radio-button>
              <el-radio-button label="travel"></el-radio-button>
              <el-radio-button label="unclassified"></el-radio-button>
            </el-radio-group>
          </el-col>

          <el-col :span="4">
            <!--  -->
            <el-label>视频号：</el-label>
            <el-radio-group
              v-model="queryObj.myFlagShipinhao"
              @change="getDataList"
            >
              <el-radio-button label="0">未发送</el-radio-button>
              <el-radio-button label="1">已发送</el-radio-button>
            </el-radio-group>
          </el-col>

          <el-col :span="4">
            <!--
            <el-label>抖音：</el-label>
            <el-radio-group disabled v-model="queryObj._myFlagShipinhao" @change="myFlagShipinhaoChange">
              <el-radio-button label="0">未发送</el-radio-button>
              <el-radio-button label="1">已发送</el-radio-button>
            </el-radio-group>  -->
          </el-col>

          <!-- <el-col :span="4">
            <el-switch
              v-model="queryObj.myFlagShipinhao"
              @change="getDataList"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-col> -->
          <el-col :span="8" style="padding: 0 100px"
            ><el-button
              type="warning"
              plain
              style="width: 150px"
              @click="resetQuery"
              >重置</el-button
            ></el-col
          >
        </el-row>
      </div>

      <!-- <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-button
            v-if="permissions.myvideos_myvideos_add"
            icon="el-icon-plus"
            type="primary"
            @click="addOrUpdateHandle()"
            >新增</el-button
          >
        </el-form-item>
      </el-form> -->

      <div class="avue-crud">
        <el-table :data="dataList" border stripe v-loading="dataListLoading">
          <el-table-column
            prop="id"
            width="66px"
            header-align="center"
            align="center"
            label="主键id"
          >
          </el-table-column>
          <el-table-column
            prop="jid"
            width="88px"
            header-align="center"
            align="center"
            label="视频ID"
          >
          </el-table-column>
          <el-table-column
            prop="jdesc"
            header-align="center"
            align="center"
            label="原标题"
          >
          </el-table-column>
          <el-table-column
            prop="myTitleCn"
            header-align="center"
            align="center"
            label="自定义标题"
          >
          </el-table-column>
          <el-table-column
            prop="myTagsCn"
            header-align="center"
            align="center"
            label="标签"
          >
          </el-table-column>
          <el-table-column
            prop="videoDuration"
            width="88px"
            header-align="center"
            align="center"
            label="视频时长s"
          >
            <template scope="scope">
              <el-label
                v-bind:class="
                  scope.row.videoDuration >= 9
                    ? 'videoDurationGreen'
                    : 'videoDurationGray'
                "
              >
                {{ scope.row.videoDuration }}
              </el-label>
            </template>
          </el-table-column>
          <el-table-column
            prop="videoCover"
            header-align="center"
            align="center"
            label="视频封面"
          >
            <template scope="scope">
              <img
                :src="'/_tiktok_res/cover/' + scope.row.jid + '.jpg'"
                width="108"
                height="192"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="statsDiggcount"
            header-align="center"
            align="center"
            label="点赞/播放 K"
          >
            <template scope="scope">
              <el-label>
                {{ scope.row.statsDiggcount/1000 }}K / {{ scope.row.statsPlaycount/1000 }}K
              </el-label>
            </template>
          </el-table-column>
          <el-table-column
            prop="authorAvatarthumb"
            header-align="center"
            align="center"
            label="作者头像/UID/热度"
          >
            <template scope="scope">
              <img
                :src="
                  'https://p16-tiktokcdn-com.akamaized.net/aweme/100x100/' +
                  scope.row.authorAvatarthumb
                "
                width="80"
                height="80"
              />
              <br>
              <el-label>
                {{ scope.row.authorUniqueid }}
              </el-label>
              <br>
              <el-label>
                {{ scope.row.authorstatsHeart/1000 }}K
              </el-label>
            </template>
          </el-table-column>
          <el-table-column
            prop="myFlagShipinhao"
            header-align="center"
            align="center"
            label="视频号标记"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.myFlagShipinhao"
                @change="onChageMyFlagShipinhao(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <br>
              <el-button
                style="margin: 5px 5px"
                @click="FabuShipinhao(scope.row)"
                >发布</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="myFlagDouyin"
            header-align="center"
            align="center"
            label="抖音标记"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.myFlagDouyin"
                @change="onChageMyFlagShipinhao(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <br>
              <el-button
                style="margin: 5px 5px"
                @click="FabuDouyin(scope.row)"
                >发布</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="myStatus"
            header-align="center"
            align="center"
            label="可用标记">
            <template scope="scope">
              <el-switch
                v-model="scope.row.myStatus"
                @change="onChageMyFlagShipinhao(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <!--             <el-table-column
                    prop="updateTime"
                    header-align="center"
                    align="center"
                    label="操作时间">
            </el-table-column> -->
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <!--
                <el-button v-if="permissions.myvideos_myvideos_edit" type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button v-if="permissions.myvideos_myvideos_del" type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
               -->
              <el-button
                v-if="permissions.myvideos_myvideos_edit"
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="addOrUpdateSimpleHandle(scope.row)"
                >=修改=</el-button
              >
              <!-- <el-select
                v-model="scope.row.myVideoClass"
                filterable
                allow-create
                default-first-option
                @change="myVideoClassChange(scope.row)"
              >
                <el-option
                  v-for="item in myVideoClassOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></table-form>
      <!-- 弹窗, 修改Simple -->
      <table-form-simple
        v-if="addOrUpdateSimpleVisible"
        ref="addOrUpdateSimple"
        @refreshDataList="getDataList"
      ></table-form-simple>
    </basic-container>
  </div>
</template>

<script>
import { getObj, addObj, putObj, fetchList, delObj } from "@/api/myvideos";
import TableForm from "./myvideos-form";
import TableFormSimple from "./myvideos-form-simple";
import { mapGetters } from "vuex";
import request from "@/router/axios";

export default {
  data() {
    return {
      dataForm: {
        key: "",
      },
      // 查询条件对象
      queryObj: {
        myVideoClass: undefined,
        myFlagShipinhao: undefined,
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      addOrUpdateSimpleVisible: false,

      myVideoClassOptions: [
        {
          value: "cosplay",
          label: "cosplay",
        },
        {
          value: "travel",
          label: "travel",
        },
        {
          value: "unclassified",
          label: "unclassified",
        },
      ],
    };
  },
  components: {
    TableForm,
    TableFormSimple
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.queryObj
        )
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
      this.dataListLoading = false;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 新增 / 修改 （Simple）
    addOrUpdateSimpleHandle(row) {
      this.addOrUpdateSimpleVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdateSimple.init(row);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.success("删除成功");
          this.getDataList();
        })
        .catch(() => {});
    },

    // 修改视频号标记
    onChageMyFlagShipinhao(row) {
      // row.myFlagShipinhao = row.myFlagShipinhao + 0;
      console.log(row);
      putObj(row)
        .then((data) => {
          this.$notify.success("修改成功");
        })
        .catch(() => {
          this.$notify.success("异常");
        });
    },
    myVideoClassChange(row) {
      console.log("myVideoClassChange >>> ", row);
      putObj(row)
        .then((data) => {
          this.$notify.success("修改成功");
        })
        .catch(() => {
          this.$notify.success("异常");
        });
    },
    // 发布视频到视频号
    FabuShipinhao(row) {
      console.log(row);
      // 参数检测
      if (row.myFlagShipinhao) {
        this.$notify.warning("视频已经发布过了");
        return
      }
      if (row.myTitleCn.length == 0) {
        this.$notify.warning("视频标题不能为空");
        return
      }
      if (row.myTagsCn.length == 0) {
        this.$notify.warning("视频标签不能为空");
        return
      }
      
      return request({
        url: '/myvideos/myvideos/FabuShipinhao',
        method: 'post',
        params: {jId: row.jid},
        timeout: 2 * 60 * 1000
      })
      .then((data) => {
        console.log(data)
        if (data.data.data) {
          this.$notify.success("修改成功");
          // 重新获取视频数据的各种属性
          this.getDataList();
        } else {
          this.$notify.warning("失败了");
        }
      })
      .catch(() => {
        this.$notify.warn("异常");
      });
    },
    // 发布视频到抖音
    FabuDouyin(row) {
      console.log('FabuDouyin', row);
      // 参数检测
      if (row.myFlagDouyin) {
        this.$notify.warning("视频已经发布过了");
        return
      }
      if (row.myTitleCn.length == 0) {
        this.$notify.warning("视频标题不能为空");
        return
      }
      if (row.myTagsCn.length == 0) {
        this.$notify.warning("视频标签不能为空");
        return
      }
      
      return request({
        url: '/myvideos/myvideos/FabuDouyin',
        method: 'post',
        params: {jId: row.jid},
        timeout: 2 * 60 * 1000
      })
      .then((data) => {
        console.log(data)
        if (data.data.data) {
          this.$notify.success("修改成功");
          // 重新获取视频数据的各种属性
          this.getDataList();
        } else {
          this.$notify.warning("失败了");
        }
      })
      .catch(() => {
        this.$notify.warn("异常");
      });
    },
    resetQuery() {
      this.queryObj = {
        myVideoClass: undefined,
        myFlagShipinhao: undefined,
      };
      this.getDataList();
    },
  },
};
</script>

<style>
.videoDurationGreen {
  color: Aqua;
  font-weight: 700;
  font-size: 28px;
}
.videoDurationGray {
  font-size: 20px;
  color: lightgray;
}
</style>
